import {userLogout} from '@/services/userService';
import {Link} from '@@/exports';
import {EyeOutlined, LogoutOutlined, StarFilled, UserOutlined} from '@ant-design/icons';
import {useModel} from '@umijs/max';
import {Avatar, Button, Dropdown, Menu, message} from 'antd';
import classNames from 'classnames';
import {stringify} from 'querystring';
import React, {useState} from 'react';
import {history} from 'umi';
import styles from './index.less';
import UserInfoModal from "@/components/GlobalHeader/UserInfoModal";
import PwdUpdateModal from "@/components/GlobalHeader/PwdUpdateModal";

/**
 * 头像下拉菜单
 *
 * @constructor
 */
const AvatarDropdown: React.FC = () => {
    const {initialState, setInitialState} = useModel('@@initialState');
    const loginUser = initialState?.loginUser;

    const [userInfoModalVisible, setUserInfoModalVisible] = useState<boolean>(false)
    const [userUpdatePwdVisible, setUserUpdatePwdVisible] = useState<boolean>(false)



    const onMenuClick = async (event: {
        key: React.Key;
        keyPath: React.Key[];
    }) => {
        const {key} = event;

        if (key === 'logout') {
            try {
                await userLogout();
                message.success('已退出登录');
            } catch (e: any) {
                message.error('操作失败');
            }
            // @ts-ignore
            await setInitialState({...initialState, loginUser: undefined});
            history.replace({
                pathname: '/user/login',
                search: stringify({
                    redirect: window.location.href,
                }),
            });
            return;
        }
        if (key === 'userInfo') {
            setUserInfoModalVisible(true)
        }
        if (key === 'updatePwd') {
            setUserUpdatePwdVisible(true)
        }
    };


    /**
     * 下拉菜单
     */
    const menuHeaderDropdown = loginUser ? (
        <div>
            <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
                <Menu.Item key="current" disabled>
                <span style={{color: 'black', fontSize: '18px'}}>
                  {loginUser.userName}
                </span>
                </Menu.Item>

                <Menu.Item key="userInfo">
                  <span style={{color: 'gray'}}>
                    <UserOutlined/>
                    用户信息
                  </span>
                </Menu.Item>


                <Menu.Item key="updatePwd">
                <span style={{color: 'gray'}}>
                  <EyeOutlined/>
                  更新密码
                </span>

                </Menu.Item>


                <Menu.Item key="logout">
                <span style={{color: 'red'}}>
                  <LogoutOutlined/>
                  退出登录
                </span>
                </Menu.Item>
            </Menu>

        </div>
    ) : (
        <></>
    );

    return loginUser ? (
        <div>

            <Dropdown
                overlayClassName={classNames(styles.container)}
                overlay={menuHeaderDropdown}
            >
                <div className={`${styles.action} ${styles.account}`}>
                    <Avatar src={loginUser.userAvatar}>{loginUser.userName?.[0]}</Avatar>
                </div>
            </Dropdown>
            <UserInfoModal
                modalVisible={userInfoModalVisible}
                data={loginUser}
                onClose={() => setUserInfoModalVisible(false)}
            />
            <PwdUpdateModal
                modalVisible={userUpdatePwdVisible}
                onClose={() => {
                    setUserUpdatePwdVisible(false)
                }}
            />
        </div>
    ) : (
        <Link to="/user/login">
            <Button type="primary" ghost>
                登录
            </Button>
        </Link>
    );
};

export default AvatarDropdown;
